import React from "react";
import ReactECharts from "echarts-for-react";
import type { EChartsOption } from "echarts";
import * as echarts from "echarts";

import {
  CockpitChartBaseProps,
  echartsCockpitTheme,
} from "../helps/echartsCommon";

export const getKxAcceptanceStatisticsBarChartOption = ({
  dataSource = [],
}: KxAcceptanceStatisticsBarChartProps): EChartsOption => {
  return {
    // backgroundColor:'#323a5e',
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      left: "2%",
      right: "4%",
      bottom: "4%",
      top: "20%",
      containLabel: true,
    },
    legend: {
      data: [
        "单位工程验收",
        "分部工程验收",
        "子分部工程验收",
        "分项工程验收",
        "检验批验收",
      ],
      // left: 10,
      top: 12,
      right: 10,
      textStyle: {
        fontSize: 12,
        color: "#FDFFFF",
      },
      itemWidth: 8,
      itemHeight: 6,
      itemGap: 10,
    },
    xAxis: {
      type: "category",
      data: dataSource.map((d) => d.name || ""),
      axisLine: {
        show: false,
        //  lineStyle: {
        //    color: 'white'

        //  }
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        // interval: 0,
        // rotate: 40,
        fontSize: 14,
        color: "#FFFFFF",
        margin: 19,
        interval: 0,
        width: 100,
        overflow: "truncate",
      },
    },

    yAxis: {
      name: "个",
      nameTextStyle: {
        color: "#FDFFFF",
        fontSize: 14,
        opacity: 0.8,
      },
      type: "value",
      //  max:'1200',
      axisLine: {
        show: false,
        lineStyle: {},
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#FEFFFF",
          opacity: 0.1,
        },
      },
      axisLabel: {
        fontSize: 14,
        fontFamily: "Arial",
        color: "#FDFFFF",
        opacity: 0.8,
      },
    },
    series: [
      {
        name: "单位工程验收",
        type: "bar",
        barWidth: 8,
        barGap: "140%",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#39A1F5",
            },
            {
              offset: 1,
              color: "#04FFFF",
            },
          ]),
          borderRadius: 12,
        },

        data: dataSource.map((d) => d.unitAmount || 0),
      },
      {
        name: "分部工程验收",
        type: "bar",
        barWidth: 8,
        barGap: "140%",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#1ED94F",
            },
            {
              offset: 1,
              color: "#F2F047",
            },
          ]),
          borderRadius: 11,
        },

        data: dataSource.map((d) => d.segmentAmount || 0),
      },
      {
        name: "子分部工程验收",
        type: "bar",
        barWidth: 8,
        barGap: "140%",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#FDE2FF",
            },
            {
              offset: 1,
              color: "#B8A8FF",
            },
          ]),
          borderRadius: 11,
        },

        data: dataSource.map((d) => d.subSegmentAmount || 0),
      },
      {
        name: "分项工程验收",
        type: "bar",
        barWidth: 8,
        barGap: "140%",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#FACC22",
            },
            {
              offset: 1,
              color: "#F83600",
            },
          ]),
          borderRadius: 11,
        },

        data: dataSource.map((d) => d.projectAmount || 0),
      },
      {
        name: "检验批验收",
        type: "bar",
        barWidth: 8,
        barGap: "140%",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#FF0F47",
            },
            {
              offset: 1,
              color: "#FFAB96",
            },
          ]),
          borderRadius: 11,
        },

        data: dataSource.map((d) => d.batchAmount || 0),
      },
    ],
  };
};

export interface KxAcceptanceStatisticsBarChartProps
  extends CockpitChartBaseProps {
  img?: string;
}
export const KxAcceptanceStatisticsBarChart = ({
  reactEChartsProps,
  dataSource = [],
  height = "354px",
}: KxAcceptanceStatisticsBarChartProps) => {
  return (
    <ReactECharts
      theme={echartsCockpitTheme}
      style={{
        height: height,
      }}
      option={getKxAcceptanceStatisticsBarChartOption({
        dataSource,
      })}
      {...reactEChartsProps}
    />
  );
};
export default KxAcceptanceStatisticsBarChart;
